﻿<!--
    Mango - Open Source M2M - http://mango.serotoninsoftware.com
    Copyright (C) 2006-2011 Serotonin Software Technologies Inc.
    @author Matthew Lohbihler
    
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see http://www.gnu.org/licenses/.
 -->
<h1>Обзор</h1>
<p>Все атрибуты графического вида и связанные с ним объекты можно изменять на странице редактирования графического вида. Графический вид представляет собой набор постоянных или изменяющихся компонентов, основанных на данных одного или нескольких объектов.</p>

<h1>Атрибуты графического вида</h1>
<p>Каждый графический вид должен иметь Имя, по которому он будет идентифицироваться в списках. Желательно (но необязательно), чтобы это имя было уникальным. По желанию пользователя вид может иметь Фоновый рисунок, на котором наложены компоненты вида. В качестве фонового рисунка можно использовать изображения любого формата, передаваемого браузером, в том числе GIF, JPEG, и PNG. Атрибут Анонимный доступ дает возможность пользователям, не вошедшим в систему под своей учетной записью, просматривать содержимое графического вида. Вид доступа Редактирование позволяет анонимным пользователям устанавливать в виде значения настраиваемых объектов. Вид доступа Чтение дает возможность анонимным пользователям просматривать содержимое вида, но без установки значений объектов. Вид доступа Нет доступа означает, что анонимные пользователи не имеют доступа к данному виду.</p>

<h1>Компоненты вида</h1>
<p>Компоненты вида можно добавить, выбрав тип компонента из списка и нажав на пиктограмму <img src="images/plugin_add.png"/>. Новый компонент по умолчанию располагается в центре вида, но его можно перетащить и оставить в любом месте в пределах границ фона. Обратите внимание, что виды объекта могут перекрывать друг друга. При редактировании вида компоненты записываются в том порядке, в котором они были заданы. Порядок записи может повлиять на то, каким образом виды перекрывают друг друга.</p>
<h1>Постоянное содержимое</h1>
<p>
Чтобы добавить постоянное содержимое, выберите тип компонента HTML. По умолчанию постоянное содержимое представлено пиктограммой <img src="images/html_add.png"/>. (Эта пиктограмма будет использоваться в тех случаях, когда содержимое не задано). Так как постоянные компоненты не зависят от значений объектов, они отображаются один раз при загрузке вида, и остаются неизменными в течение всего времени работы с видом. Переместите компонент в нужное положение. Для редактирования, наведите курсор мыши на компонент. Вы увидите управляющие элементы редактирования. Для изменения содержимого нажмите пиктограмму <img src="images/pencil.png"/> и введите любой действительный html адрес. Содержимое будет перенесено в вид один к одному, поэтому можно использовать любой HTML (включая Java-содержимое). Кроме того, можно использовать классы стилей из CSS-файлов или непосредственно указать стиль. Например, чтобы добавить метку, можно использовать следующую запись:</p>
<pre> &lt;span style="background-color:yellow;font-size:25px;font-weight:bold;border:2px solid orange;"&gt;My label&lt;/span&gt; </pre>
<p>  Результат будет выглядеть так: <span style="background-color:yellow;font-size:25px;font-weight:bold;border:2px solid orange;">My label</span></p>
<p>  Постоянное содержимое может также включать ссылки на другие серверы. Например, в Ваш вид можно поместить изображение из внешних источников: </p>
<pre>
  &lt;img src="http://bluebrain.epfl.ch/webdav/site/bluebrain/shared/21june_06_singleNeuron_200.jpg"/&gt;
</pre>
<p>  На виде будет отображаться: <img src="http://bluebrain.epfl.ch/webdav/site/bluebrain/shared/21june_06_singleNeuron_200.jpg"/></p>
<h1>Компоненты точки</h1>
<p>
Визуализация всех остальных типов компонентов, имеющихся в списке, зависит от одного или нескольких объектов. Как только компонент добавляют в вид, появляется его представление по умолчанию – пиктограмма обобщенного объекта (<img src="images/icon_comp.png"/>). Такое представление будет сохраняться до тех пор, пока не появиться достаточно информации для визуализации данных. Содержание этой информации определяется типом компонента. Страница редактирования вида соответствует странице вида в том, что пользователь сразу видит, как будет отображаться и обновляться текущее значение объекта на виде. </p>
<h1>Визуализация компонентов объекта</h1>
<p>
Визуализация компонентов объекта может быть изменена с помощью элементов управления редактированием, появляющимся при наведении курсора мыши на компонент. Элементы управления, отображаемые на странице редактирования вида отличаются от тех, что находятся на странице вида, за исключением элемента управления информацией (<img src="images/information.png"/>), который показывает текущее значение и время последнего изменения значения объекта. </p>
<p>Нажатием пиктограммы редактирования вида объекта (<img src="images/plugin_edit.png"/>) можно установить атрибуты вида объекта. При этом на экране появится панель редактирования, на которой можно изменить атрибуты объекта в компоненте графического вида. Например, если объект является настраиваемым, можно изменить его атрибут так, что в этом конкретном виде он будет ненастраиваемым (хотя ненастраиваемые объекты сделать настраиваемыми нельзя). Данная панель также используется для задания объекта или объектов, данные которых будет визуализировать компонент. В списке объектов отражены только те объекты, которые имеют совместимый с компонентом тип данных.</p>
<p>Графическая визуализация компонента может быть изменена нажатием на пиктограмму графической визуализации (<img src="images/graphic.png"/>). При этом появляется панель управления, с помощью которой можно редактировать атрибуты визуализации компонента. Например, компонент Аналоговая графика (Analog graphic) может использоваться для вывода на экран текстового представления значения числового объекта.Использование Минимального и Максимального значений дает возможность равномерно распределить изображения в числовом диапазоне и корректно отразить их на экране. Двоичный графический (Binary Image) построитель изображений применим только для двоичных объектов. Он позволяет выводить на экран одно из двух изображений в зависимости от текущего значения объекта. Также поддерживаются анимированные изображения. Такие изображения могут быть использованы для наглядной индикации, например, когда устройство работает или отключено. Кроме того можно выводить на экран текстовое представление объекта поверх изображения. Для этого необходимо выбрать опцию Показать текст. Опция Простая точка (Simple point) выдает на экран только текстовое представление объекта.  </p>
<p>
  Динамический графический компонент подобен аналоговому визуализатору изображений в том, что он может визуализировать объекты числового типа, но вместо того, чтобы выбирать одно изображение из набора, он динамически вытягивает индикатор значения. Например, можно установить стрелку на отдельное изображение циферблата (шкалы прибора). Чтобы добавить новый графический визуализатор, создайте вложенную подпапку в папке графики и поместите в нее постоянное изображение и соответствующий информационный файл. Затем добавьте функцию визуализации в файл resources/view.js. Функция должна иметь имя, совпадающее с именем вложенной подпапки. В качестве примера посмотрите Dial graphic. </p>

<p>
  A <b>Server-side script</b> component can be used to define your own rendering logic. The scripting language used 
  here is JavaScript, also known as ECMAScript. (The full specification for ECMAScript is available 
  <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">here</a>.) There are,
  however, no "window" or "document" objects available since the script is evaluated on the server rather than the 
  browser. Instead, the current value of the point is available via the <b>value</b> var, and the timestamp of the 
  sample is given in the <b>time</b> var. In addition, <b>pointComponent</b> and <b>point</b> vars are also defined, 
  with analogous values, and "htmlText" and "renderedText" represent rendered versions of the value. Finally, "events" 
  provides a list of active events for the point, and "hasUnacknowledgedEvent" is a boolean value indicating whether at 
  least one of the active events is not acknowledged.
</p>
<p>Для задания собственных выражений визуализации можно использовать компонент Сценарий сервера. Для написания сценариев используется язык JavaScript, также известный как ECMAScript. (Полное описание ECMAScript можно найти <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">здесь</a>). Однако, так как сценарий выполняется на сервере, а не в браузере, такие объекты как «окно» или «документ» не используются. Вместо этого, текущее значение объекта задается через переменную значения value var, а метка времени задается через переменную времени time var. Кроме того, задаются переменные Компонент объекта и Объект, имеющие аналоговый тип значений, а &quot;htmlText&quot; (текст html) и &quot;renderedText&quot; (преобразованный текст) определяют текстовое представление значений. И, наконец, аргумент &quot;events&quot; (события) выдает список активных событий объекта, а аргумент &quot;hasUnacknowledgedEvent&quot; (есть неквитированное событие) является булевым значением, показывающим наличие хотя бы одного неквитированного активного события.</p>
<p>
  Сценарий может возвращать любое значение, но оно будет выводиться в вид объекта «дословно» (т.е. один к одному), поэтому лучше всего использовать html. Содержание сценария (в тэгах &lt;сценария&gt;) также можно включить в браузер, где он будет считан и выполнен. Например, следующий сценарий будет реализовывать мигающее сообщение, если значение объекта равно «1» (или «истина» на языке сценария):</p>
<pre>
  if (value)
      return '&lt;blink&gt;&lt;span style="background-color:orange;font-size:15px;font-weight:bold;"&gt;Warning: point is ON&lt;/span&gt;&lt;/blink&gt;';
  return "";
</pre>
<p>
Обратите внимание, что в случае, если сценарий не выдает результат, на странице редактирования будет размещена пиктограмма <img src='images/logo_icon.gif'/> , чтобы пользоваться элементами редактирования, всплывающими при наведении курсора мыши.</p>
<p>  Метка времени приводится в миллисекундах, начиная с 1 января 1970 г. Ее можно преобразовать в объект ECMA со следующим кодом: </p>
<pre>
  var d = new Date();
  d.setTime(time);
</pre>
<p>
  Объект даты &quot;d&quot; можно использовать дальше в сценарии. Вид объекта можно удалить с помощью пиктограммы удаления вида объекта (<img src="images/plugin_delete.png"/>), всплывающей при наведении курсора мыши. </p>

<h1>Сохранение графических видов</h1>
<p>Все изменения, выполненные в графическом виде вступают в силу только после нажатия кнопки Сохранить. Если были сделаны неправильные изменения, их можно отменить с помощью кнопки Отмена. Чтобы удалить вид полностью, нажмите кнопку Удалить.</p>
